<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
    <title>Document</title>
    <link rel="stylesheet" href="../css/style.css">
    <link rel="stylesheet" href="../lib/swiper-bundle.min.css">
    <link rel="stylesheet" href="../css/detailed.css">

    <script src="../lib/flexible.js"></script>
    <script src="../lib/swiper-bundle.min.js"></script>
</head>

<body>
    <div class="banner">
        <div class="q1"><img src="../images/详情/22@2x.png" alt=""><img src="../images/详情/21@2x.png" alt=""></div>
        <!-- Swiper -->
        <div class="swiper mySwiper">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><img src="../images/详情/4@2x.png" alt=""></div>
                <div class="swiper-slide"><img src="../images/详情/4@2x.png" alt=""></div>
                <div class="swiper-slide"><img src="../images/详情/4@2x.png" alt=""></div>
                <div class="swiper-slide"><img src="../images/详情/4@2x.png" alt=""></div>
                <div class="swiper-slide"><img src="../images/详情/4@2x.png" alt=""></div>
                <div class="swiper-slide"><img src="../images/详情/4@2x.png" alt=""></div>
                <div class="swiper-slide"><img src="../images/详情/4@2x.png" alt=""></div>
                <div class="swiper-slide"><img src="../images/详情/4@2x.png" alt=""></div>
                <div class="swiper-slide"><img src="../images/详情/4@2x.png" alt=""></div>
            </div>
            <!-- <div class="swiper-button-next"></div>
      <div class="swiper-button-prev"></div> -->
            <div class="swiper-pagination"></div>
        </div>
    </div>
    <!-- 价格 -->
    <div class="price">
        <ul>
            <li>
                <i><em>￥</em><span>1200.00</span>
                </i><span>原价<del>￥2534.00</del>
                </span>
            </li>
            <li>
                <span>距结束仅剩</span>
                <span><em>1天</em>
                    <i>14</i><em>:</em><i>26</i><em>:</em><i>26</i></span>
            </li>
        </ul>
    </div>
    <!-- 优惠卷 -->
    <div class="coupon">
        <ul>
            <li><img src="../images/详情/10@2x.png" alt=""></li>
            <li><span>领卷<span>></span></span></li>
        </ul>
    </div>
    <!-- 精选 -->
    <div class="Featured">
        <span>
            <img src="../images/详情/5@2x.png" alt="">
            <i> 分期免息 Qianku/屏锅 qianku XR 128G 红色不动不通不信5G手机 双卡双待</i>
            <br>

            <img src="../images/详情/11@2x.png" alt="" class="t2"></span>

    </div>
    <!-- 规格 -->
    <div class="Specification">
        <ul>
            <li>
                <span>已选</span>
                <span>华为mate30 1件 官方标配</span>
                <img src="../images/详情/6@2x.png" alt="">


            </li>
            <li> <span>送至</span>
                <span>河南省 郑州市 惠济区<span>现在付款，尽快为你发货</span></span>

                <img src="../images/详情/6@2x.png" alt="">
            </li>
            <li> <span>运费</span>
                <span>免运费</span>
                <img src="../images/详情/6@2x.png" alt="">
            </li>
            <li> <span>服务 </span>
                <span>7天无理由退货急速退</span>
                <img src="../images/详情/6@2x.png" alt="">
            </li>

        </ul>
    </div>
    <!-- 规格 -->
    <div class="one">
        <ul>
            <li>规格</li>
            <li>
                <span>华为<br /><i>品牌</i></span>
                <span>Mate30<br /><i>型号</i></span>
                <span>幻夜黑<br /><i>颜色</i></span>
                <span>内存6/8GB<br /><i>内存</i></span>
            </li>
        </ul>
    </div>
    <!-- 评论 -->
    <div class="Comment">
        <!-- 第一个<ul></ul> -->
        <ul>
            <li>
                <img src="../images/详情/12@2x.png" alt="">
                <span> 评价66万+ | 好评率99%</span>

            </li>
            <li>
                <span>查看全部 </span>
                <img src="../images/详情/6@2x.png" alt="">
            </li>

        </ul>
        <!-- 第二个ul -->
        <ul>
            <li><span>味道好（14076）</span><span>价格实惠（11938）</span></li>
        </ul>
        <!-- 第三个ul -->
        <ul>
            <li>
                <img src="../images/详情/13@2x.png" alt="">
                <span>1***n</span>
                <img src="../images/详情/24@2x.png" alt="" class="img1">
            </li>
            <li>
                <img src="../images/详情/16@2x.png" alt="">
                <img src="../images/详情/16@2x.png" alt="">
                <img src="../images/详情/16@2x.png" alt="">
                <img src="../images/详情/16@2x.png" alt="">
                <img src="../images/详情/16@2x.png" alt="">
            </li>

        </ul>

        <span class="Word1">发货神速，操作起来没有问题，操作起来很流畅<br /><i>完全没有问题。</i></span>
        <p class="Word2">规格：内存6/8GB</p>
        <!-- 第四个ul -->
        <ul>
            <li>
                <img src="../images/详情/12@2x.png" alt="">
                <span> 问问已购用户 <i style="font-size: .3733rem; color: #8c9198;margin-left:.2.667rem;">共19条问答</i> </span>



            </li>
            <li>
                <span>查看全部 </span>
                <img src="../images/详情/6@2x.png" alt="">
            </li>

        </ul>
        <!-- 第五个ul -->
        <ul class="ul5">
            <li><img src="../images/详情/14@2x.png" alt="" style="width:.4267rem;height:.4267rem;">
                <span style="    width: 8.3467rem;
                height: .5867rem;

                color: #494955;
                font-size: .4267rem;">手机是正品吗？</span>
            </li>
            <li><span>23个回答</span></li>
        </ul>
        <ul class="ul5">
            <li><img src="../images/详情/14@2x.png" alt="" style="width:.4267rem;height:.4267rem;">
                <span style="    width: 8.3467rem;
                        height: .5867rem;
        
                        color: #494955;
                        font-size: .4267rem;">请问亲们购买时快递怎么样…</span>
            </li>
            <li><span>23个回答</span></li>
        </ul>
    </div>
    <!-- 参数 -->
    <div class="commodity">
        <ul>
            <li>
                <img src="../images/详情/12@2x.png" alt="">
                <span>商品参数</span>
            </li>
            <li class="li2"><span style="   width: 1.7067rem;
                    height: .5867rem;

                    color: #b0b8c2;
                    font-size: .4267rem;         margin-left: -60px;">全部参数</span>
                <img src="../images/详情/6@2x.png" alt="">
            </li>
        </ul>
        <div>
            <span>品牌</span><span>华为</span>

        </div>
        <div>
            <span>品牌</span><span>Mate30</span>

        </div>
        <div>
            <span>品牌</span><span>幻夜黑</span>

        </div>
        <div>
            <span>品牌</span><span>内存6/8GB</span>

        </div>
        <ul>
            <li>
                <img src="../images/详情/12@2x.png" alt="">
                <span>销售包装</span>
            </li>
            <li class="li2"><span style="   width: 1.7067rem;
                            height: .5867rem;
        
                            color: #b0b8c2;
                            font-size: .4267rem;         margin-left: -60px;">全部参数</span>
                <img src="../images/详情/6@2x.png" alt="">
            </li>
        </ul>
        <!-- 包装清单 -->
        <div class="baozhuang">
            <p style="white-space: nowrap;font-weight:600;
color:#202020;
font-size:.3733rem;   ">&nbsp包装清单&nbsp&nbsp .&nbsp&nbsp&nbsp 售后服务&nbsp&nbsp.&nbsp&nbsp&nbsp
                特别声明&nbsp&nbsp.&nbsp&nbsp&nbsp价格说明</p>
        </div>
        <div class="Graphics" style=" width: .96rem;">
            <img src="../images/详情/12@2x.png" alt=""><span>图文详情</span>
        </div>
    </div>
    <!-- 底部图片 -->
    <div class="bottom">
        <img src="../images/详情/20@2x.png" alt="">
    </div>
    <div class="bottom_1">
        <ul>
            <li> <img src="../images/详情/01 (1).png" alt=""><span>客服</span></li>
            <li><img src="../images/详情/01 (2).png" alt=""><span>购物车</span></li>

        </ul>
        <ul>
            <li> <span>加入购物车</span> </li>
            <li><span>立即购买</span></li>

        </ul>
    </div>
    <script>
        var swiper = new Swiper(".mySwiper", {
            spaceBetween: 30,
            centeredSlides: true,
            autoplay: {
                delay: 2500,
                disableOnInteraction: false,
            },
            pagination: {
                el: ".swiper-pagination",
                clickable: true,
                type: "fraction",

            },
            navigation: {
                nextEl: ".swiper-button-next",
                prevEl: ".swiper-button-prev",
            },
        });
    </script>
</body>

</html>